<template>
    <div class="admin">
        <el-container>
            <el-aside width="240px">
                <div class="block-avatar">
                    <el-avatar
                        class="img-avatar"
                        :size="64"
                        :src="circleUrl"
                    ></el-avatar>
                    <el-dropdown trigger="click" @command="logOut">
                        <span class="el-dropdown-link">
                            {{ userName }}<i
                                class="el-icon-arrow-down el-icon--right"
                            ></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="ri-logout-box-r-line"
                                >退出</el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <el-menu
                    :default-active="$route.path"
                    class="el-menu-vertical-demo"
                    background-color="#001529"
                    text-color="#fff"
                    active-text-color="#1890ff"
                    router
                >
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="admin-icon ri-home-5-fill"></i>
                            <span>系统首页</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/home">经营概况</el-menu-item>
                            <el-menu-item index="/account"
                                >账号资料</el-menu-item
                            >
                            <el-menu-item index="/appointmentrecord"
                                >预约记录</el-menu-item
                            >
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="admin-icon ri-user-3-fill"></i>
                            <span>用户管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/membera/memberlist"
                                >会员列表</el-menu-item
                            >
                            <el-menu-item index="/memberb/membergarde"
                                >会员等级</el-menu-item
                            >
                            <el-menu-item index="/memberc/membercard"
                                >会员卡</el-menu-item
                            >
                            <el-menu-item index="/memberd/CoachList"
                                >教练列表</el-menu-item
                            >
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="admin-icon ri-store-3-fill"></i>
                            <span>商城管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/productlist"
                                >商品列表</el-menu-item
                            >
                            <el-menu-item index="/productcategory"
                                >商品分类</el-menu-item
                            >
                            <el-menu-item index="/productorder"
                                >商城订单</el-menu-item
                            >
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="admin-icon ri-open-arm-fill"></i>
                            <span>课程管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/league/leaguecourse">团课管理</el-menu-item>
                            <el-menu-item index="/addleague">私课管理</el-menu-item>
                            <el-menu-item index="/commenton">评价管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                            <i class="admin-icon ri-government-fill"></i>
                            <span>场馆管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/venue">场馆列表</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="6">
                        <template slot="title">
                            <i class="admin-icon ri-coupon-3-fill"></i>
                            <span>活动管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/discount">优惠券</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="7">
                        <template slot="title">
                            <i class="admin-icon ri-function-fill"></i>
                            <span>系统管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/memberadmin"
                                >成员管理</el-menu-item
                            >
                            <el-menu-item index="/character"
                                >角色管理</el-menu-item
                            >
                            <el-menu-item index="/advertising"
                                >广告管理</el-menu-item
                            >
                            <el-menu-item index="/announcement"
                                >公告管理</el-menu-item
                            >
                            <el-menu-item index="/system"
                                >系统配置</el-menu-item
                            >
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header>
                    <div class="header-box onflex">
                        <div>
                            <h1>健身房预约管理系统</h1>
                        </div>
                        <div>
                            <i
                                class="ri-fullscreen-line"
                                :class="[hideClass1]"
                                title="全屏模式"
                                @click="fullScreen"
                            ></i>
                            <i
                                class="ri-fullscreen-exit-line"
                                :class="[hideClass2]"
                                title="退出全屏"
                                @click="exitFullScreen"
                            ></i>
                        </div>
                    </div>
                </el-header>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            userName: "",
            circleUrl:
                "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            hideClass1: "",
            hideClass2: "hide",
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        fullScreen() {
            var docElm = document.documentElement;
            if (docElm.requestFullscreen) {
                docElm.requestFullscreen();
                this.hideClass1 = "hide";
                this.hideClass2 = "";
            } else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
                this.hideClass1 = "hide";
                this.hideClass2 = "";
            } else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
                this.hideClass1 = "hide";
                this.hideClass2 = "";
            } else if (docElm.msRequestFullscreen) {
                docElm.msRequestFullscreen();
                this.hideClass1 = "hide";
                this.hideClass2 = "";
            }
        },
        exitFullScreen() {
            if (document.exitFullscreen) {
                document.exitFullscreen();
                this.hideClass1 = "";
                this.hideClass2 = "hide";
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
                this.hideClass1 = "";
                this.hideClass2 = "hide";
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
                this.hideClass1 = "";
                this.hideClass2 = "hide";
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
                this.hideClass1 = "";
                this.hideClass2 = "hide";
            }
        },
        logOut(){
               sessionStorage.removeItem('token');
               sessionStorage.removeItem('user');
               this.$router.push('/login');
        },
        getUser(){
            
            this.userName = JSON.parse(sessionStorage.getItem('user')).name ;

        }
    },
    mounted(){
        this.getUser();
        
    }
};
</script>

<style lang="less" scoped>
.el-container {
    height: 100%;
}

.el-header {
    text-align: left;
    background-color: #ffffff;
    color: #333;
    line-height: 60px;
}

.el-aside {
    background-color: #001529;
    color: #333;
}

.el-main {
    background-color: #f0f2f5;
    color: #333;
}
.el-menu {
    text-align: left;
    border: none;
}
.block-avatar {
    height: 120px;
    padding-top: 20px;
    border-bottom: 1px solid #ffffff20;
}
.el-dropdown {
    display: block;
    margin-top: 10px;
    color: #ffffff;
}
.admin-icon {
    vertical-align: middle;
    margin-right: 10px;
    margin-left: 5px;
    width: 24px;
    text-align: center;
    font-size: 18px;
}
.el-menu-item {
    padding-left: 53px !important;
}
.header-box {
    justify-content: space-between;
    .ri-fullscreen-line,
    .ri-fullscreen-exit-line {
        font-size: 24px;
        cursor: pointer;
    }
    .hide {
        display: none;
    }
}


</style>

<style lang="less">
.el-aside::-webkit-scrollbar {
    width: 0 !important;
}
.el-main::-webkit-scrollbar {
    width: 0 !important;
}
</style>
